<template>
  <el-dialog
    class="addWarnItem-operate-dialog"
    :close-on-click-modal="false"
    :model-value="modelValue"
    @close="closeForm"
    draggable
  >
    <template #header>
      <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']">
        添加
      </div>
    </template>
    <el-scrollbar class="ba-table-form-scrollbar">
      <div
        class="ba-operate-form"
        :style="'width: calc(100% - ' + state.labelWidth! / 2 + 'px)'"
      >
        <el-form
          ref="formRef"
          @keyup.enter="onAddSubmit(formRef)"
          :model="state.form"
          label-position="right"
          :label-width="state.labelWidth + 'px'"
          :rules="rules"
        >
          <!-- <el-form-item prop="itemName" label="告警指标项名称">
            <el-input
              v-model="state.form.itemName"
              type="string"
              placeholder="告警指标项名称"
            ></el-input>
          </el-form-item> -->
          <FormItem label="" type="array" v-model="state.array" />
        </el-form>
      </div>
    </el-scrollbar>
    <template #footer>
      <div :style="'width: calc(100% - ' + state.labelWidth / 1.8 + 'px)'">
        <el-button @click="closeForm">取消</el-button>
        <el-button
          v-blur
          :loading="state.submitLoading"
          @click="onAddSubmit(formRef)"
          type="primary"
        >
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref, inject, onMounted, onBeforeUnmount } from "vue";
import type baTableClass from "@/utils/baTable";
import type {
  ElForm,
  FormItemRule,
  FormRules,
  FormInstance,
} from "element-plus";
import useCurrentInstance from "@/utils/useCurrentInstance";

const warnItem = inject("warnItem") as any;
const itemObject = inject("itemObject") as any;

const formRef = ref<InstanceType<typeof ElForm>>();
const { proxy } = useCurrentInstance(); //mitt

const state: {
  regionOptions: anyObj[];
  categoriesOptions: anyObj[];
  gatewayOptions: anyObj[];
  objectOptions: anyObj[];
  form: any;
  labelWidth: number;
  submitLoading: boolean;
  array: any;
} = reactive({
  regionOptions: [], //区域列表
  categoriesOptions: [], //告警类别列表
  gatewayOptions: [], //告警类别列表
  objectOptions: [], //告警对象列表
  form: {},
  labelWidth: 160,
  submitLoading: false,
  array: [
    {
      itemName: "",
      ruleId: null,
      ruleName: "",
      objectId: null,
      objectName: "",
      mqttFiled: "",
      // grainSize: null,
      symbol: "",
      value: "", //蓝色告警值 改为黄色告警值
      value2: "", //橙色告警值
      value3: "", //红色告警值
      containNum: null,
      frequency: null,
    },
  ],
});

interface Props {
  modelValue: boolean;
}
const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
});

const emits = defineEmits<{
  (e: "update:modelValue", value: boolean): void;
}>();
const closeForm = () => {
  emits("update:modelValue", false);
};

const rules = reactive<FormRules>({
  //   color: [{ required: true, message: "级别颜色不能为空", trigger: "blur" }],
  //   mark: [{ required: true, message: "告警级别标注不能为空", trigger: "blur" }],
});

//循环遍历新增指标项
const adLoop = (arr: any[]) => {
  let len = arr.length;
  for (let i = 0; i < len; i++) {
    warnItem.add(state.array[i]).then((res: any) => {});
  }
  closeForm();
  proxy.eventBus.emit("refreshDict");
};

//提交表单
const onAddSubmit = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid, fields) => {
    if (valid) {
      console.log("提交表单", state.array);
      adLoop(state.array);
      //新增
    } else {
      console.log("error submit!", fields);
    }
  });
};

//添加指标项表单
proxy.eventBus.on("addWarnItem", (data: any) => {
  state.array[0].ruleId = data.ruleId;
  state.array[0].ruleName = data.ruleName;
  console.log("添加指标项表单", data);
});

//获取告警对象列表
const getobjectList = () => {
  itemObject
    .getWarningItemObjectList({ pageSize: 10000 })
    .then((res: any) => {
      state.objectOptions = res;
    })
    .catch((err: any) => {});
};

onMounted(() => {
  getobjectList(); //获取告警对象列表
});
onBeforeUnmount(() => {
  proxy.eventBus.off("addWarnItem");
});
</script>
<style lang="scss">
.el-scrollbar {
  overflow: auto;
  position: relative;
  height: 100%;

  .el-scrollbar__wrap {
    overflow: auto;
    height: 100%;
  }
}
.addWarnItem-operate-dialog {
  width: 80% !important;
}
</style>
